<template>
  <div>
    <div>
      <el-button type="primary" style="margin-bottom: 20px;" @click="openMath" size="medium">查看当前电子签名</el-button>
    </div>
    <el-dialog
      title="电子签名预览"
      center
      :visible.sync="mathDialog"
      width="50%"
      >
      <div style="min-height: 300px;display: flex;align-items: center;justify-content: center;">
        <div v-if="mathUrls.length>0">
          <div v-for="(mathUrl , index) in mathUrls" class="shadow">
            <img style="width: 100%;" :src="'/api'+mathUrl">
            <div style="position: absolute;right: 5px;bottom: 5px;">
              <a style="font-size: 24px;cursor: pointer;text-decoration: none;color: #606266;" target="_blank" :href="'/api'+mathUrl" class="el-icon-download" ></a >
              <i style="font-size: 24px;cursor: pointer;text-decoration: none;" @click="delMath(index)" class="el-icon-delete" ></i>
            </div>
          </div>
        </div>
        <span v-else>还没有上传电子签名！</span>
      </div>
    </el-dialog>
    <div class="padBox">
      <div class="top">绘制电子签名</div>
      <canvas id="canvas"></canvas>
      <div style="display: flex;justify-content: end;padding-right: 20px;padding-top: 20px;border-top: 3px dotted rgba(128, 128, 128, .5);">
        <el-button type="primary" @click="savePad">提交签名</el-button>
        <el-button type="info" @click="clear">清除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import SignaturePad from 'signature_pad'
  import dataURLtoBlob from 'blueimp-canvas-to-blob'
export default {
  name: "Math",
  data(){
    return {
      signaturePad:null,
      mathDialog:false,
      mathUrls:[]
    }
  },
  methods:{
    initPad(){
      const canvas = document.getElementById('canvas')
      console.log(canvas)
      this.signaturePad = new SignaturePad(canvas,{penColor: "rgb(0,0,0)"});
      const ratio =  Math.max(window.devicePixelRatio || 1, 1);
      canvas.width = canvas.offsetWidth * ratio;
      canvas.height = canvas.offsetHeight * ratio;
      canvas.getContext("2d").scale(ratio, ratio);
      this.signaturePad.fromData(this.signaturePad.toData());
    },
    savePad(){
       this.$confirm('改签名将作为您的电子签名，是否提交？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
       }).then(async () => {
         if(this.signaturePad.isEmpty()) return this.$message.warning('请绘制您的电子签名！')
          let dataUrl=this.signaturePad.toDataURL()
          let blob=dataURLtoBlob(dataUrl)
          let formData=new FormData()
          formData.append('file',blob)
          let  result=await this.$post('/api/uploadImg?flag=1',formData)
          if(result.code==200){
            this.openMathPreview()
            this.$message.success('保存签名成功')
            this.clear()
          }
       })
       .catch(() => {
         this.$message({
           type: 'info',
           message: '已取消上传'
         });
       });
    },
    clear(){
      this.signaturePad.clear()
    },
    async openMathPreview(){
      let result=await this.$get('/api/getSignImg')
      this.mathUrls=result.data
    },
    async downMath(index){
      this.$down('/api'+this.mathUrls)
    },
    openMath(){
      this.openMathPreview()
      this.mathDialog=true
    },
    async delMath(index){
      let res=await this.$post('/api/delSignImg',{url:this.mathUrls[index]})
      if(res.code==200){
        this.mathUrls.splice(index,1)
        this.$message.success('删除成功')
      }else this.$message.error(res.msg)
    }
  },
  mounted(){
    this.initPad()
    this.openMathPreview()
  }
}
</script>

<style scoped>
#canvas {
      height: 500px;
      width: 100%;
    }
.top{
  background-color: #409EFF;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: calc(100% + 1.3px);
  color: white;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.padBox{
  /* border: 1px solid grey; */
  box-sizing: border-box;
  padding-bottom: 20px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
a:visited{
  color: #606266;
}
.shadow{
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  margin: 20px 0;
  position: relative;
  height: 200px;
}
</style>
